<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useNavStore } from '@/js/store';
import { useRouter } from 'vue-router';


    const topNav = ref([]);
    const topNavStore = useNavStore( );
    const url = web_url + '/cms/nav';
    axios.get(url).then( ( res ) => {

        topNav.value = res.data;
        // topNavStore.nav.value = res.data;
        topNavStore.nav = res.data;

        // console.log( 'topNavStore.nav.value:',topNavStore.nav )
        
    });  

	const uniacid = ref('');
	let uniacid_ls = localStorage.getItem('uniacid');
	if( uniacid_ls == null ){
		uniacid.value = 13;
		// localStorage.setItem( 'uniacid', uniacid.value );
	}else{
		uniacid.value = uniacid_ls;
	}

	const openChildNav = ( current_nav_id ) => {
		console.log( 'openChildNav:', current_nav_id )
		if ( topNavStore.active_nav_id == current_nav_id ){
			topNavStore.active_nav_id = 0;
		}else{
			topNavStore.active_nav_id = current_nav_id;
		}

	}

	// console.log('uniacid.value:',uniacid.value)
	const lang_switch_show = ref( false );
	const lang_switch = ( ) => {
		lang_switch_show.value = lang_switch_show.value ? false : true;
		// console.log('lang_switch_show.value:',lang_switch_show.value)
	}

	const router = useRouter();

	const changeLanguage = ( lang ) => {

		if( lang == 'ZH' ){
			uniacid.value = 12;
			localStorage.setItem('uniacid', 12);
		}

		if( lang == 'EN' ){
			uniacid.value = 13;
			localStorage.setItem('uniacid', 13);
		}

		if( lang == 'JP' ){
			uniacid.value = 14;
			localStorage.setItem('uniacid', 14);
		}

		lang_switch_show.value = false;
		
		// 跳转到首页
		router.push('/').then(() => {
			// 跳转完成后刷新页面
			location.reload();
		});
	}

	const navPhoneSwitch = () => {
		const nav = document.querySelector('.js-main-nav');
		nav.classList.toggle('main-nav--opened');

		const navToggle = document.querySelector('.js-nav-toggle');
		navToggle.classList.toggle('nav-toggle--active');

		const headerControl = document.querySelector('.header__controls');
		headerControl.classList.toggle('header__controls--opened');
	}
</script>

<template>
	<header class="header js-header header--active">
		<div class="searchbar" data-searchbar="">
			<i class="icon-times searchbar__close-btn" data-searchbar-close=""></i>
			<div class="searchbar__form">
				<input type="text" data-search-field="" class="searchbar__input" placeholder="搜索网站">
				<a data-search-btn="/search/" class="btn searchbar__submit" disabled="">馬上搜索</a>
				<div class="searchbar__suggested">
					<span class="searchbar__popular">熱門搜索詞
					</span>
					<ul class="searchbar__popular-items">
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=合约制造" target="_blank" rel="nofollow">合约制造</a>
						</li>
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=管材加工" target="_blank" rel="nofollow">管材加工</a>
						</li>
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=注塑成型" target="_blank" rel="nofollow">注塑成型</a>
						</li>
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=冲压成型" target="_blank" rel="nofollow">冲压成型</a>
						</li>
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=激光切割" target="_blank" rel="nofollow">激光切割</a>
						</li>
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=钣金加工" target="_blank" rel="nofollow">钣金加工</a>
						</li>
						<li class="searchbar__popular-item">
							<a href="/zh-hans/search/?query=组装装配" rel="nofollow">组装装配</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container header__container">
			<a class="logo" href="/" title="德大海康">
				<img class="lazy entered loaded" style="width:auto" data-src="/src/assets/img/logo.jpg" alt="KMS Logo 20 Years"
					data-ll-status="loaded" src="/src/assets/img/logo.jpg">
			</a>
			<button class="nav-toggle js-nav-toggle" @click="navPhoneSwitch()">
				<span></span>
				<span></span>
				<span></span>
				<div class="sr-only"></div>
			</button>

			<nav class="main-nav js-main-nav">
				<ul class="main-nav__list" role="menubar">

					<li v-for="item,index in topNav" :key="index" 
						:class="{'main-nav__item--has-children':item.children.length>0}"
						@click.stop="openChildNav(item.id)"
						class="main-nav__item ">
						<a :href="item.link?item.link:'javascript:void(0)'" class="main-nav__link">
						{{ item.title }}
							<i v-if="item.children.length>0" class="icon icon-chevron-down"></i>
						</a>

						<div class="main-nav__expanded-item popup" 
							v-if="item.children.length>0"
							:class="{'popup--visible': topNavStore.active_nav_id == item.id}">
							<div class="dropdown container">
								<div class="dropdown__column">
									<div class="dropdown__heading">
										{{ item.title }} 
									</div>

									<div class="dropdown__column-container">

										<a v-for="itemitem, i_index in item.children" :key="i_index"
										 :href="itemitem.link" class="dropdown__item">
											
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">{{ itemitem.title }}</span>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
					</li>
<!--
					<li class="main-nav__item main-nav__item--has-children">
						<a href="#" class="main-nav__link">解决方案 <i class="icon icon-chevron-down"></i></a>

						<div class="main-nav__expanded-item popup">
							<div class="dropdown container">
								<div class="dropdown__column">
									<div class="dropdown__heading">
										解决方案1
									</div>

									<div class="dropdown__column-container">
										<a href="/zh-hans/contract-manufacturing/" class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/bzufhiz3/transparency.svg"
												width="24" alt="Contract Manufacturing"
												class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">合约制造</span>
											</div>
										</a>
										<a href="/zh-hans/product-assembly-service-china/" class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/qkxijxwc/assembly.svg"
												width="24" alt="Assembly" class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">组装装配</span>
											</div>
										</a>
										<a href="/zh-hans/tube-pipe-part-fabrication-china/" class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/3pkjmzj5/pipe-and-tube.svg"
												width="24" alt="Pipe and Tube Processing"
												class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">管材加工</span>
											</div>
										</a>
										<a href="/zh-hans/custom-metal-stamping-parts-china/" class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/yzheb5tz/stamping.svg"
												width="24" alt="Stamping" class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">冲压成型</span>
											</div>
										</a>
										<a href="/zh-hans/plastic-product-manufacturing-china/" class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/onrntxax/plasticinjection.svg"
												width="24" alt="Plastic Injection"
												class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">注塑成型</span>
											</div>
										</a>
										<a href="/zh-hans/contract-manufacturing/sheet-metal-fabrication/"
											class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/n0kap1sn/sheetmetal.svg"
												width="24" alt="Sheet Metal Fabrication"
												class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">钣金加工</span>
											</div>
										</a>
										<a href="/zh-hans/contract-manufacturing/laser-cutting/" class="dropdown__item">
											<img data-src="https://static.komaspec.com/media/yk0nqjqv/lasercutting.svg"
												width="24" alt="Laser Cutting" class="icon icon--medium icon--green lazy"
												data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">激光切割</span>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="main-nav__item main-nav__item--has-children">
						<a href="#" class="main-nav__link">实力 <i class="icon icon-chevron-down"></i></a>

						<div class="main-nav__expanded-item popup">
							<div class="dropdown container">
								<div class="dropdown__column">
									<div class="dropdown__heading">
										实力
									</div>

									<div class="dropdown__column-container">
										<a href="/zh-hans/quality-management/" title="质量管理" class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">质量管理</span>
											</div>
										</a>
										<a href="/zh-hans/design-for-manufacturability-dfm/" title="可制造性设计 (DFM)"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">可制造性设计 (DFM)</span>
											</div>
										</a>
										<a href="/zh-hans/industry-4-0-turnkey-manufacturer-china/" title="工业 4.0"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">工业 4.0</span>
											</div>
										</a>
										<a href="/zh-hans/new-product-introduction-npi/" title="新产品引进 (NPI)"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">新产品引进 (NPI)</span>
											</div>
										</a>
										<a href="/zh-hans/kickstarter-and-indiegogo-china-product-development/"
											title="Kickstarter 和 Indiegogo" class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">Kickstarter 和 Indiegogo</span>
											</div>
										</a>
										<a href="/zh-hans/electromechanical-assembly-china-manufacturing/" title="部件和组件"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">部件和组件</span>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="main-nav__item main-nav__item--has-children">
						<a href="#" class="main-nav__link">关于我们 <i class="icon icon-chevron-down"></i></a>

						<div class="main-nav__expanded-item popup">
							<div class="dropdown container">
								<div class="dropdown__column">
									<div class="dropdown__heading">
										关于我们
									</div>

									<div class="dropdown__column-container">
										<a href="/zh-hans/about-us/" title="关于我们" class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">关于我们</span>
											</div>
										</a>
										<a href="/zh-hans/product-assembly-china-contract-manufacturer/" title="行业和产品经验"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">行业和产品经验</span>
											</div>
										</a>
										<a href="/zh-hans/milestones-contract-manufacturer-china/" title="里程碑"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">里程碑</span>
											</div>
										</a>
										<a href="/zh-hans/contract-manufacturing-facilities/" title="我们的工厂"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">我们的工厂</span>
											</div>
										</a>
										<a href="/zh-hans/about-us/our-team/" title="我们的团队" class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">我们的团队</span>
											</div>
										</a>
										<a href="/zh-hans/china-contract-manufacturing-customers/" title="我们的客户"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">我们的客户</span>
											</div>
										</a>
										<a href="/zh-hans/smart-manufacturing-strategy-china/" title="我们的战略"
											class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">我们的战略</span>
											</div>
										</a>
										<a href="/zh-hans/contact-us/" title="联系我们" class="dropdown__item">
											<div class="dropdown__item-wrapper">
												<span class="dropdown__item-title">联系我们</span>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="main-nav__item main-nav__item--has-children">
						<a href="#" class="main-nav__link">下载</a>

					</li>
					<li class="main-nav__item">
						<a href="/zh-hans/manufacturing-in-china-news/" class="main-nav__link">新闻</a>
					</li>
-->
<!-- 
					<li class="main-nav__item btn__instant-quote">
						<a href="/zh-hans/get-a-quote/" class="btn">取得报价</a>
					</li>
					 -->
				</ul>
			</nav>
			<div class="header__controls">
				<!-- <a href="#" data-searchbar-open=""><i class="icon-search"></i></a> -->

				<div class="language-switcher js-language-switcher">
					<button type="button"  @click="lang_switch()" aria-expanded="false" aria-controls="language-switcher__controls"
						class="language-switcher__button js-language-switcher__button">
						<span class="sr-only">选择您的语言</span>
						
						<img v-show="uniacid==12" src="/src/assets/flags/ZH.svg" class="language-switcher__flag">
						<span v-show="uniacid==12" class="language-switcher__current-language">ZH</span>

						<img v-show="uniacid==13" src="/src/assets/flags/EN.svg" class="language-switcher__flag">
						<span v-show="uniacid==13" class="language-switcher__current-language">EN</span>
						
						<img v-show="uniacid==14" src="/src/assets/flags/JP.svg" class="language-switcher__flag">
						<span v-show="uniacid==14" class="language-switcher__current-language">JP</span>

						<i class="icon icon-chevron-down">
						</i>
					</button>
				<div style="display:none">本标为了签破坏样式：language-switcher__button+ul</div>
				<ul v-show="lang_switch_show" class="language-switcher__content">
					<li class="language-switcher__item" >
						<a class="language-switcher__link" @click="changeLanguage('EN')">
							<img src="/src/assets/flags/EN.svg" class="language-switcher__flag">
							<span lang="en-US">EN</span>
						</a>
					</li>
					<li class="language-switcher__item" >
						<a class="language-switcher__link" @click="changeLanguage('ZH')">
							<img src="/src/assets/flags/ZH.svg" class="language-switcher__flag">
							<span lang="en-ZH">ZH</span>
						</a>
					</li>
					<li class="language-switcher__item" >
						<a class="language-switcher__link" @click="changeLanguage('JP')">
							<img src="/src/assets/flags/JP.svg" class="language-switcher__flag">
							<span lang="en-ZH">JP</span>
						</a>
					</li>
				</ul>
			</div>

			<!-- <a href="/zh-hans/get-a-quote/" class="btn">取得报价 <i class="icon icon-chevron-right-light"></i></a> -->
		</div>
	</div>
</header></template>

<style>
.icon-chevron-down:before {
    content: "\e900";
}

.header__container{
	gap:0;
}
</style>